<template>
  <div class="menus-manage">
    <!-- 面包屑 -->
    <div class="bread-crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/home/prolist' }">项目列表</el-breadcrumb-item>
        <el-breadcrumb-item>{{proinfo.proNo}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="main-middle proinfo">
      <el-row :gutter="20">
        <el-col :span="16">
          <div class="never-card margin-b15" shadow="never">
            <div class="card-header">
              基本信息
              <label class="proinfo-edit-btn" @click="infoedit">
                <i class="el-icon-edit"> 修改</i>
              </label>
            </div>
            <div class="card-body" style="padding-bottom:0;">
              <el-row class="info-list" :gutter="24">
                <el-col :span="24">项目名称：{{proinfo.proName}}</el-col>
                <el-col :span="12">立项时间：{{proinfo.cycleStart | filterTime}}</el-col>
                <el-col :span="12">项目周期：{{proinfo.cycleStart | filterTime}} 至 {{proinfo.cycleEnd | filterTime}}</el-col>
                <el-col :span="12">所属公司：{{proinfo.compId | selComp(compList) }}</el-col>
                <el-col :span="12">客户名称：{{proinfo.cusName}}</el-col>
              </el-row>
              <!--
              <el-divider></el-divider>
              <el-row :gutter="24">
                <el-col :span="12">标记转签：{{proinfo.sign === 1 ? '是' : '否'}}</el-col>
                <el-col :span="12">接收转签：{{proinfo.receive === 1 ? '是' : '否'}}</el-col>
                <el-col :span="12">关联项目：{{proinfo.related === null ? '无' : proinfo.related}}</el-col>
              </el-row>
              -->
            </div>
          </div>
          <div class="never-card margin-b15" shadow="never">
            <div class="card-header">
              费用信息
              <label class="proinfo-edit-btn" @click="moneyAdd">
                <i class="el-icon-plus"> 添加</i>
              </label>
            </div>
            <div class="card-body money-box">
                <!-- 数据列表 -->
                <el-table
                  :data="moneyData"
                  border
                  width="100%"
                  height="280"
                  ref="contractData"
                >
                  <!-- 费用类型 -->
                  <el-table-column
                    :show-overflow-tooltip="true"
                    width="150"
                    label="费用类型"
                  >
                    <template slot-scope="scope">{{ scope.row.typeCode | selMoneyType(moneyType) }}</template>
                  </el-table-column>
                  <!-- 费用金额 -->
                  <el-table-column
                    :show-overflow-tooltip="true"
                    width="150"
                    label="费用金额"
                  >
                    <template slot-scope="scope">￥{{ scope.row.cost }}元</template>
                  </el-table-column>
                  <!-- 费用周期 -->
                  <el-table-column
                    :show-overflow-tooltip="true"
                    width="220"
                    label="费用周期"
                  >
                    <template slot-scope="scope">{{ scope.row.beginTime | filterTime }} 至 {{ scope.row.endTime | filterTime }}</template>
                  </el-table-column>
                  <!-- 备注说明 -->
                  <el-table-column :show-overflow-tooltip="true" prop="note" label="备注说明"></el-table-column>
                  <!-- 操作列 -->
                  <el-table-column
                    label="管理"
                    fixed="right"
                    align="center"
                    width="160"
                    v-if="[btnDel,btnEdit].indexOf(true) > -1"
                  >
                    <template slot-scope="scope">
                      <!-- 删除 -->
                      <el-button
                        type="danger"
                        size="mini"
                        @click="costDelete(scope.row)"
                        v-if="btnDel"
                      >删除</el-button>
                      <!-- 修改 -->
                      <el-button size="mini" @click="editCost(scope.row)" v-if="btnDel">修改</el-button>
                    </template>
                  </el-table-column>
                </el-table>
            </div>
          </div>
          <div class="never-card margin-b15" shadow="never">
            <div class="card-header">
              项目材料
              <label class="proinfo-edit-btn" @click="file">
                <i class="el-icon-upload"> 上传</i>
              </label>
            </div>
            <div class="card-body file-box">
              <el-tabs class="fileTabs" v-model="activeName" @tab-click="handleClick">
                <el-tab-pane
                  class="file-table"
                  :label="'项目合同（'+ contractData.length+ ')'"
                  name="first"
                >
                  <!-- 数据列表 -->
                  <el-table
                    :data="contractData"
                    border
                    width="100%"
                    height="280"
                    ref="contractData"
                  >
                    <!-- 合同编号 -->
                    <el-table-column
                      :show-overflow-tooltip="true"
                      prop="conNo"
                      width="150"
                      label="合同编号"
                    ></el-table-column>
                    <!-- 合同名称 -->
                    <el-table-column
                      :show-overflow-tooltip="true"
                      prop="conName"
                      width="150"
                      label="合同名称"
                    ></el-table-column>
                    <!-- 公司名称 -->
                    <el-table-column
                      :show-overflow-tooltip="true"
                      prop="compName"
                      width="150"
                      label="公司名称"
                    ></el-table-column>
                    <!-- 客户名称 -->
                    <el-table-column
                      :show-overflow-tooltip="true"
                      prop="cusName"
                      width="150"
                      label="客户名称"
                    ></el-table-column>
                    <!-- 签订人 -->
                    <el-table-column
                      :show-overflow-tooltip="true"
                      prop="signUser"
                      width="80"
                      label="签订人"
                    ></el-table-column>
                    <!-- 合同金额 -->
                    <el-table-column
                      :show-overflow-tooltip="true"
                      width="100"
                      label="合同金额"
                    >
                      <template slot-scope="scope">￥{{ scope.row.money }}元</template>
                    </el-table-column>
                    <!-- 备注说明 -->
                    <el-table-column :show-overflow-tooltip="true" prop="note" label="备注说明"></el-table-column>
                    <!-- 操作列 -->
                    <el-table-column
                      label="管理"
                      fixed="right"
                      align="center"
                      width="240"
                      v-if="[btnDel,btnEdit].indexOf(true) > -1"
                    >
                      <template slot-scope="scope">
                        <!-- 下载 -->
                        <el-button
                          type="success"
                          size="mini"
                          @click="downCon(scope.row)"
                          v-if="btnDel"
                        >下载</el-button>
                        <!-- 删除 -->
                        <el-button
                          type="danger"
                          size="mini"
                          @click="handleDelete(scope.row)"
                          v-if="btnDel"
                        >删除</el-button>
                        <!-- 修改 -->
                        <el-button size="mini" @click="editCon(scope.row)" v-if="btnDel">修改</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-tab-pane>
                <el-tab-pane
                  class="file-table"
                  :label="'验收报告（'+ accepData.length+ ')'"
                  name="second">
                  <!-- 数据列表 -->
                  <el-table
                    :data="accepData"
                    border
                    width="100%"
                    height="280"
                    ref="contractData"
                  >
                    <!-- 合同编号 -->
                    <el-table-column
                      :show-overflow-tooltip="true"
                      prop="conNo"
                      width="150"
                      label="合同编号"
                    ></el-table-column>
                    <!-- 验收报告名称 -->
                    <el-table-column
                      :show-overflow-tooltip="true"
                      prop="acceptName"
                      width="150"
                      label="验收报告"
                    ></el-table-column>
                    <!-- 验收类型 -->
                    <el-table-column
                      :show-overflow-tooltip="true"
                      width="150"
                      label="验收类型"
                    >
                      <template slot-scope="scope">
                        <span v-if="scope.row.type === 1">初验</span>
                        <span v-else-if="scope.row.type === 3">终验</span>
                        <span v-else>验收</span>
                      </template>
                    </el-table-column>
                    <!-- 签字人 -->
                    <el-table-column
                      :show-overflow-tooltip="true"
                      prop="signUser"
                      width="150"
                      label="签字人"
                    ></el-table-column>
                    <!-- 验收日期 -->
                    <el-table-column
                      :show-overflow-tooltip="true"
                      prop="signDay"
                      width="150"
                      label="验收日期"
                    >
                      <template slot-scope="scope">{{ scope.row.signDay | filterTime }}</template>
                    </el-table-column>
                    <!-- 结果 -->
                    <el-table-column
                      :show-overflow-tooltip="true"
                      prop="result"
                      width="80"
                      label="结果"
                    ></el-table-column>
                    <!-- 备注说明 -->
                    <el-table-column :show-overflow-tooltip="true" prop="note" label="备注说明"></el-table-column>
                    <!-- 操作列 -->
                    <el-table-column
                      label="管理"
                      fixed="right"
                      align="center"
                      width="240"
                      v-if="[btnDel,btnEdit].indexOf(true) > -1"
                    >
                      <template slot-scope="scope">
                        <!-- 下载 -->
                        <el-button
                          type="success"
                          size="mini"
                          @click="accepDownload(scope.row)"
                          v-if="btnDel"
                        >下载</el-button>
                        <!-- 删除 -->
                        <el-button
                          type="danger"
                          size="mini"
                          @click="accepDelete(scope.row)"
                          v-if="btnDel"
                        >删除</el-button>
                        <!-- 修改 -->
                        <el-button
                          size="mini"
                          @click="accepEdit(scope.row)"
                          v-if="btnDel"
                        >修改</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-tab-pane>
                <el-tab-pane
                class="file-table"
                :label="'文档资料（'+ filesData.length+ ')'"
                name="third">
                  <!-- 数据列表 -->
                  <el-table
                    :data="filesData"
                    border
                    width="100%"
                    height="280"
                    ref="contractData"
                  >
                    <!-- 文件名称 -->
                    <el-table-column
                      :show-overflow-tooltip="true"
                      prop="fileName"
                      width="150"
                      label="文件名称"
                    ></el-table-column>
                    <!-- 文件类别 -->
                    <el-table-column
                      :show-overflow-tooltip="true"
                      width="150"
                      label="文件类别"
                    >
                      <template slot-scope="scope">{{ scope.row.type | selType(options) }}</template>
                    </el-table-column>
                    <!-- 备注说明 -->
                    <el-table-column :show-overflow-tooltip="true" prop="note" label="备注说明"></el-table-column>
                    <!-- 操作列 -->
                    <el-table-column
                      label="管理"
                      fixed="right"
                      align="center"
                      width="240"
                      v-if="[btnDel,btnEdit].indexOf(true) > -1"
                    >
                      <template slot-scope="scope">
                        <!-- 下载 -->
                        <el-button
                          type="success"
                          size="mini"
                          @click="filesDownload(scope.row)"
                          v-if="btnDel"
                        >下载</el-button>
                        <!-- 删除 -->
                        <el-button
                          type="danger"
                          size="mini"
                          @click="filesDelete(scope.row)"
                          v-if="btnDel"
                        >删除</el-button>
                        <!-- 修改 -->
                        <el-button size="mini" @click="filesEdit(scope.row)" v-if="btnEdit">修改</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="never-card margin-b15" shadow="never">
            <div class="card-header">成员信息 {{memberList.length}}人</div>
            <div class="card-body" style="overflow:auto; padding-bottom: 0">
              <ul class="members">
                <li><label>项目经理</label></li>
                <div v-for="(item, ind) in memberList" :key="ind">
                  <li v-if="item.role === '项目经理'">
                    <el-tag><i class="el-icon-s-custom"></i> <em>{{ item.userName }}</em></el-tag>
                  </li>
                </div>
              </ul>
              <ul class="members">
                <li style="width:100%;">项目成员</li>
                <div v-for="items in memberList" :key="items.userId">
                  <li v-if="items.role === '成员'">
                    <el-tag type="info"><i class="el-icon-user-solid"></i> <em>{{ items.userName }}</em></el-tag>
                  </li>
                </div>
              </ul>
            </div>
          </div>
          <div class="never-card margin-b15" shadow="never">
            <div class="card-header">
              人力信息
              <label class="proinfo-edit-btn" @click="peoDay">
                <i class="el-icon-edit"> 修改</i>
              </label>
            </div>
            <div class="card-body lv-member">
              <ve-pie height="280px" :data="chartData" :settings="chartSettings"></ve-pie>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 修改项目基本信息 -->
    <el-dialog title="修改信息" :visible.sync="isInfoEdit" :close-on-click-modal="false">
      <el-form ref="infoEdit" :model="infoEdit" label-width="80px" :rules="infoEditRules">
        <el-row :gutter="24">
          <el-col :span="12">
            <!-- 项目名称 -->
            <el-form-item label="项目名称" prop="proName">
              <el-input v-model="infoEdit.proName"></el-input>
            </el-form-item>
             <!-- 是否为转签 -->
            <el-form-item label="标记转签" prop="sign">
              <el-select v-model="infoEdit.sign" style="width:100%">
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="0"></el-option>
              </el-select>
            </el-form-item>
             <!-- pmp -->
            <el-form-item label="项目经理" prop="pmp">
              <!-- 员工选择框子组件 -->
              <user-sel :pmp="pmp" :users="users" @seluser="selUser" v-model="infoEdit.pmp"></user-sel>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <!-- 客户名称 -->
            <el-form-item label="客户名称" prop="cusId">
              <el-select style="width:100%" v-model="infoEdit.cusId">
                <el-option
                  v-for="key in cusList"
                  :key="key.id"
                  :label="key.cusName"
                  :value="key.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- 项目周期 -->
            <el-form-item label="项目周期" prop="cycle">
              <el-date-picker
                v-model="infoEdit.cycle"
                style="width:100%"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!-- 取消关闭弹窗-->
        <el-button @click.native="isInfoEdit=false">取消</el-button>
        <!-- 修改 修改项目信息 -->
        <el-button type="primary" @click="editData">修改</el-button>
      </div>
    </el-dialog>
    <!-- 修改 - 项目人天信息 -->
    <el-dialog title="修改信息" :visible.sync="isPeoDayEdit" :close-on-click-modal="false">
      <el-form ref="infoEdit" :model="peoDayEdit" label-width="80px" :rules="peoDayEditRules">
        <el-row :gutter="24">
          <el-col :span="12">
            <!-- 总监 -->
            <el-form-item label="总监" prop="director">
              <el-input-number size="medium" :min="0" :max="365" v-model="peoDayEdit.director" placeholder="预估人天"></el-input-number>
            </el-form-item>
             <!-- 经理 -->
            <el-form-item label="经理" prop="manager">
              <el-input-number size="medium" :min="0" :max="365" v-model="peoDayEdit.manager" placeholder="预估人天"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <!-- 员工 -->
            <el-form-item label="员工" prop="employees">
              <el-input-number size="medium" :min="0" :max="365" v-model="peoDayEdit.employees" placeholder="预估人天"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!-- 取消关闭弹窗-->
        <el-button @click.native="isPeoDayEdit=false">取消</el-button>
        <!-- 修改 修改项目人天信息 -->
        <el-button type="primary" @click="editPeoDay">修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 引入时间格式化插件
import moment from 'moment';
// 引入员工选择框子组件
import userSel from '@/components/UserSel/index.vue';

import { _debounce } from '@/public/debounce.js';

import VePie from 'v-charts/lib/pie';

export default {
  // 注入组件
  components: {
    // 员工选择子组件
    userSel,
    VePie
  },
  // 当前实例数据
  data () {
    return {
      // 获取所有公司
      compList: [],
      // tabs初始值
      activeName: 'first',
      // 修改回显用户
      pmp: [],
      // 弹窗是否显示
      isInfoEdit: false,
      isPeoDayEdit: false,
      // 项目基本信息
      proinfo: {},
      // 项目成员集合
      memberList: {},
      // 弹窗表单数据初始值
      infoEdit: {
        proName: '',
        cycle: [],
        pmp: [],
        cusId: ''
      },
      // 弹窗表单验证规则
      infoEditRules: {
        proName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
        cycle: [{ required: true, message: '请选择项目周期', trigger: 'change' }],
        sign: [{ required: true, message: '请选择是否标记转签', trigger: 'change' }],
        pmp: [{ required: true, message: '请选择项目经理', trigger: 'change' }],
        cusId: [{ required: true, message: '请选择客户信息', trigger: 'change' }]
      },
      // 所有客户数据
      cusList: [],
      // 项目合同数据集
      contractData: [],
      // 项目验收报告数据集
      accepData: [],
      // 项目文档资料数据集
      filesData: [],
      // 项目费用信息数据集
      moneyData: [],

      // 所有用户信息
      users: [],

      // 按钮显示隐藏  - 默认值
      btnSel: true,
      btnDel: true,
      btnUpload: true,
      btnDown: true,
      btnAdd: true,
      btnEdit: true,

      // 饼图设置参数
      chartSettings: {
        radius: 70,
        offsetY: 150,
        dataType: function (v) {
          return v + ' 人/天';
        },
        label: {
          trigger: 'item',
          formatter: '{b}:{c}人/天'
        }
      },
      // 项目 - 人天信息
      peoDays: {},
      // 饼图数据集合
      chartData: {
        columns: ['级别', '人/天'],
        rows: [
          { 级别: '总监', '人/天': 0 },
          { 级别: '经理', '人/天': 0 },
          { 级别: '员工', '人/天': 0 }
        ]
      },
      // 弹窗表单数据初始值
      peoDayEdit: {
        director: 0,
        manager: 0,
        employees: 0
      },
      // 弹窗表单验证规则
      peoDayEditRules: {
        director: [{ required: true, message: '请输入具体数值', trigger: 'blur' }],
        manager: [{ required: true, message: '请输入具体数值', trigger: 'blur' }],
        employees: [{ required: true, message: '请输入具体数值', trigger: 'blur' }]
      },
      options: [{
        value: 0,
        label: '其他'
      }, {
        value: 1,
        label: '客户标书'
      }, {
        value: 2,
        label: '客户需求'
      }, {
        value: 3,
        label: '客户问题'
      }, {
        value: 4,
        label: '客户报价单'
      }, {
        value: 5,
        label: '客户证明材料'
      }, {
        value: 8,
        label: '签到表'
      }, {
        value: 9,
        label: '会议纪要'
      }, {
        value: 10,
        label: '分工和计划'
      }, {
        value: 11,
        label: '周报日报'
      }, {
        value: 12,
        label: '用印文件'
      }, {
        value: 13,
        label: '立项材料'
      }, {
        value: 14,
        label: '证明材料'
      }, {
        value: 15,
        label: '流程附件'
      }, {
        value: 16,
        label: '汇报材料'
      }, {
        value: 17,
        label: '对外申报材料'
      }, {
        value: 18,
        label: '报价单'
      }, {
        value: 19,
        label: '投标技术文档'
      }, {
        value: 20,
        label: '投标商务文档'
      }, {
        value: 21,
        label: '投标交付方案'
      }, {
        value: 22,
        label: '投标法务文档'
      }, {
        value: 23,
        label: '投标文件'
      }, {
        value: 24,
        label: '市场调研分析'
      }, {
        value: 25,
        label: '技术可行性研究报告'
      }, {
        value: 26,
        label: '竞争分析'
      }, {
        value: 27,
        label: '归档文档'
      }],
      moneyType: [{
        value: 'XSE',
        label: '预计销售额'
      }, {
        value: 'KH',
        label: '客户交际费用'
      }, {
        value: 'CL',
        label: '差旅费用'
      }, {
        value: 'CG',
        label: '采购费用'
      }, {
        value: 'RL',
        label: '人力总成本'
      }, {
        value: 'QT',
        label: '其他费用'
      }]
    };
  },

  // 过滤器
  filters: {
    // 时间显示过滤
    filterTime (value) {
      return moment(value).format('YYYY-MM-DD');
    },
    // 公司名称
    selComp (val, params) {
      for (let i = params.length; i--;) {
        if (params[i].compId === val) {
          return params[i].compName;
        }
      }
    },
    // 文件类别
    selType (val, params) {
      for (let i = params.length; i--;) {
        if (params[i].value === val) {
          return params[i].label;
        }
      }
    },
    // 费用类别
    selMoneyType (val, params) {
      for (let i = params.length; i--;) {
        if (params[i].value === val) {
          return params[i].label;
        }
      }
    }
  },

  methods: {
    // 获取项目基本信息
    getNewPro () {
      let _this = this;
      // 收集请求参数  当前项目ID
      let params = {
        proId: _this.proinfo.id
      };
      // 根据项目ID请求项目信息
      _this.$http.raw('api/findProByIdAndCusId', params).then(res => {
        let { code, datas } = res;
        if (code === 0) {
          // 设置缓存 记录项目基本信息
          sessionStorage.setItem('project', JSON.stringify(datas.list[0]));
          _this.getProinfo();
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 读取项目基本信息
    getProinfo () {
      let _this = this;
      let project = JSON.parse(sessionStorage.getItem('project'));
      _this.proinfo = project;
    },

    // 根据项目ID  获取项目成员数据集合
    getMember () {
      let _this = this;
      let proId = JSON.parse(sessionStorage.getItem('project')).id;
      let params = {
        proId: proId
      };
      _this.$http.post('api/findMemberByProId', params).then(res => {
        let { code, datas } = res;
        if (code === 0) {
          _this.memberList = datas;
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 获取所有公司数据
    getCompList: function () {
      let _this = this;
      _this.$http.post('api/findAllCompNoPage').then(res => {
        let { code, datas } = res;
        if (code === 0) {
          _this.compList = datas;
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 获取所有用户
    getUserList () {
      let _this = this;
      let params = {
        status: ''
      };
      _this.$http.post('api/findAllBaseUsers', params).then(res => {
        let { code, datas } = res;
        if (code === 0) {
          _this.users = datas;
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 查询所有客户
    getCusList () {
      let _this = this;
      _this.$http.post('/api/findAllCus').then(res => {
        let { code, datas } = res;
        if (code === 0) {
          _this.cusList = datas;
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 显示项目基本信息 - 弹窗
    infoedit () {
      let _this = this;
      // 查询所有客户
      _this.getCusList();
      // 获取所有员工
      _this.getUserList();
      // 表单初始值
      _this.infoEdit = {
        proName: _this.proinfo.proName,
        cycle: [_this.proinfo.cycleStart, _this.proinfo.cycleEnd],
        pmp: [],
        sign: _this.proinfo.sign.toString(),
        cusId: _this.proinfo.cusId
      };
      // 根据对应工号获取员工姓名 - 回显
      _this.memberList.map(item => {
        if (item.role === '项目经理') {
          _this.pmp.push(item.userName);
          _this.infoEdit.pmp.push(item.userId, item.deptId, item.compId);
        }
      });
      // 显示弹窗
      _this.isInfoEdit = true;
    },

    // 获取选中用户信息
    selUser (data) {
      this.infoEdit.pmp = data;
    },

    // 项目基本信息 - 修改
    editData: _debounce(function () {
      let _this = this;

      _this.$nextTick(() => {
        // 判断是否通过验证规则验证
        _this.$refs['infoEdit'].validate(valid => {
          if (valid) {
            // 获取请求参数
            let params = {
              id: _this.proinfo.id,
              proName: _this.infoEdit.proName,
              sign: _this.infoEdit.sign,
              cycleStart: moment(_this.infoEdit.cycle[0]).format('YYYY-MM-DD'),
              cycleEnd: moment(_this.infoEdit.cycle[1]).format('YYYY-MM-DD'),
              cusId: _this.infoEdit.cusId,
              userId: _this.infoEdit.pmp[0]
            };
            // 根据请求参数修改对应项目基本信息
            _this.$http.raw('api/updateProject', params).then(res => {
              let { code } = res;
              if (code === 0) {
                // 执行成功关闭弹窗
                _this.isInfoEdit = false;
                // 成功提示
                _this.$message({
                  message: '修改成功！',
                  type: 'success'
                });
                // 获取项目基本信息 - 刷新基本信息
                _this.getNewPro();
                // 获取项目成员信息 - 刷新项目成员
                _this.getMember();
              }
            }).catch(err => {
              if (err === undefined) {
                _this.$message({
                  message: '服务器响应异常！',
                  type: 'error'
                });
                return false;
              }
            });
          }
        });
      });
    }, 200),

    // 显示项目人天信息 - 弹窗
    peoDay () {
      let _this = this;
      // 表单初始值
      _this.peoDayEdit = {
        id: _this.peoDays.id,
        proId: _this.peoDays.proId,
        director: _this.peoDays.director,
        manager: _this.peoDays.manager,
        employees: _this.peoDays.employees
      };
      // 显示弹窗
      _this.isPeoDayEdit = true;
    },

    // 项目人天信息 - 修改
    editPeoDay: _debounce(function () {
      let _this = this;
      _this.$nextTick(() => {
        // 判断是否通过验证规则验证
        _this.$refs['infoEdit'].validate(valid => {
          if (valid) {
            // 获取请求参数
            let params = {
              id: _this.peoDays.id,
              proId: _this.peoDays.proId,
              director: _this.peoDayEdit.director,
              manager: _this.peoDayEdit.manager,
              employees: _this.peoDayEdit.employees
            };
            // 根据请求参数修改对应项目人天信息
            _this.$http.raw('api/updatePredict', params).then(res => {
              let { code } = res;
              if (code === 0) {
                // 执行成功关闭弹窗
                _this.isPeoDayEdit = false;
                // 成功提示
                _this.$message({
                  message: '修改成功！',
                  type: 'success'
                });
                // 获取项目人天信息 - 刷新人天信息
                _this.getPeoDay();
              }
            }).catch(err => {
              if (err === undefined) {
                _this.$message({
                  message: '服务器响应异常！',
                  type: 'error'
                });
                return false;
              }
            });
          }
        });
      });
    }, 200),

    // 选中Tab并记录当前Tab值 - 传递参数
    handleClick (tab, event) {
      this.activeName = tab.name;
    },

    // 根据返回Tab值切换对应Tab内容
    tabs () {
      let _this = this;
      // 接收返回参数
      let tabs = _this.$route.query.tabs;
      // 判断
      if (tabs === 'first') {
        _this.activeName = 'first';
      }
      if (tabs === 'second') {
        _this.activeName = 'second';
      }
      if (tabs === 'third') {
        _this.activeName = 'third';
      }
    },

    // 根据所选Tabs跳转 - 添加
    file () {
      let _this = this;
      let tab = _this.activeName;
      if (tab === 'first') {
        _this.$router.push({
          path: '/home/prolist/proinfo/contract'
        });
      }
      if (tab === 'second') {
        _this.$router.push({
          path: '/home/prolist/proinfo/acceptance'
        });
      }
      if (tab === 'third') {
        _this.$router.push({
          path: '/home/prolist/proinfo/file'
        });
      }
    },

    // 项目合同 - 查询
    getConList () {
      let _this = this;
      // 收集请求信息
      let params = {
        proId: this.proinfo.id
      };
      // 根据项目ID获取对应项目合同数据
      _this.$http.post('api/findContractByProId', params).then(res => {
        let { code, datas } = res;
        if (code === 0) {
          // 项目合同数据集
          _this.contractData = datas;
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 项目合同 - 下载
    downCon (row) {
      let _this = this;
      // 获取下载文件路径
      let url = row.picUrl;
      // 判断文件是否存在
      if (url === '' || url === null || url === undefined) {
        _this.$message({
          message: '抱歉，没有文件可供下载！',
          type: 'error'
        });
      } else {
        // 路径斜杆转换反斜杠
        url = url.replace(/\\/g, '/');
        // 截取文件类型
        let start = url.lastIndexOf('.');
        let end = url.length;
        let type = url.slice(start, end);

        // 请求下载文件
        _this.$http.download('api/downLoadFile?filePath=' + url).then(function (res) {
          // new Blob([data])用来创建URL的file对象或者blob对象
          let url = window.URL.createObjectURL(new Blob([res]));
          // 创建下载标签
          let link = document.createElement('a');
          link.style.display = 'none';
          link.href = url;
          // 动态文件名 + 文件类型
          link.download = row.conName + '.' + type;
          document.body.appendChild(link);
          // 执行下载
          link.click();
          // 释放掉blob对象
          window.URL.revokeObjectURL(link.href);
          // 下载完成移除元素
          document.body.removeChild(link);
        }).catch(err => {
          if (err === undefined) {
            _this.$message({
              message: '服务器响应异常！',
              type: 'error'
            });
            return false;
          }
        });
      }
    },

    // 项目合同 - 修改
    editCon (row) {
      let _this = this;
      // 跳转合同页面并传递数据集合
      _this.$router.push({
        path: '/home/prolist/proinfo/contract',
        query: {
          datas: row
        }
      });
    },

    // 项目合同 - 删除
    handleDelete (data) {
      let _this = this;
      // 二次删除确认
      _this.$confirm('确认删除选中的信息吗？', '提示', {
        type: 'warning'
      }).then(() => {
        // 修改状态，逻辑删除
        let params = [data.id];
        // 根据数据ID删除对应项目合同
        _this.$http.raw('api/batchDelContract', params).then(res => {
          let { code } = res;
          if (code === 0) {
            _this.$message({
              type: 'success',
              message: '删除成功！'
            });
            // 刷新列表
            _this.getConList();
          }
        }).catch(err => {
          if (err === undefined) {
            _this.$message({
              message: '服务器响应异常！',
              type: 'error'
            });
            return false;
          }
        });
      }).catch(() => {
        _this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // 项目验收报告 - 查询
    getAccepList () {
      let _this = this;
      // 收集请求信息
      let params = {
        proId: _this.proinfo.id
      };
      // 获取分页数据
      _this.$http.post('api/findAcceptByProId', params).then(res => {
        let { code, datas } = res;
        if (code === 0) {
          this.accepData = datas;
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 项目验收报告 - 删除
    accepDelete (data) {
      let _this = this;
      // 二次删除确认
      _this.$confirm('确认删除选中的信息吗？', '提示', {
        type: 'warning'
      }).then(() => {
        // 修改状态，逻辑删除
        let params = [data.id];
        // 根据数据ID删除对应项目验收报告
        _this.$http.raw('api/batchDelAccept', params).then(res => {
          let { code } = res;
          if (code === 0) {
            _this.$message({
              type: 'success',
              message: '删除成功！'
            });
            // 刷新列表
            _this.getAccepList();
          }
        }).catch(err => {
          if (err === undefined) {
            this.$message({
              message: '服务器响应异常！',
              type: 'error'
            });
            return false;
          }
        });
      }).catch(() => {
        _this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // 项目验收报告 - 下载
    accepDownload (row) {
      let _this = this;
      // 获取下载文件路径
      let url = row.picUrl;
      // 判断文件是否存在
      if (url === '' || url === null || url === undefined) {
        _this.$message({
          message: '抱歉，没有文件可供下载！',
          type: 'error'
        });
      } else {
        // 路径斜杆转换反斜杠
        url = url.replace(/\\/g, '/');
        // 截取文件类型
        let start = url.lastIndexOf('.');
        let end = url.length;
        let type = url.slice(start, end);

        // 请求下载文件
        _this.$http.download('api/downLoadFile?filePath=' + url).then(function (res) {
          // new Blob([data])用来创建URL的file对象或者blob对象
          let url = window.URL.createObjectURL(new Blob([res]));
          // 创建下载标签
          let link = document.createElement('a');
          link.style.display = 'none';
          link.href = url;
          // 动态文件名 + 文件类型
          link.download = row.acceptName + '.' + type;
          document.body.appendChild(link);
          // 执行下载
          link.click();
          // 释放掉blob对象
          window.URL.revokeObjectURL(link.href);
          // 下载完成移除元素
          document.body.removeChild(link);
        }).catch(err => {
          if (err === undefined) {
            _this.$message({
              message: '服务器响应异常！',
              type: 'error'
            });
            return false;
          }
        });
      }
    },

    // 项目验收报告 - 修改
    accepEdit (row) {
      let _this = this;
      // 跳转项目验收报告页面并传递数据集合
      _this.$router.push({
        path: '/home/prolist/proinfo/acceptance',
        query: {
          datas: row
        }
      });
    },

    // 项目文档资料 - 查询
    getFilesList () {
      let _this = this;
      // 收集请求信息
      let params = {
        proId: _this.proinfo.id
      };
      // 获取文档资料数据
      _this.$http.post('api/findProFileByProId', params).then(res => {
        let { code, datas } = res;
        if (code === 0) {
          _this.filesData = datas;
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 项目文档资料 - 删除
    filesDelete (data) {
      let _this = this;
      // 二次删除确认
      _this.$confirm('确认删除选中的信息吗？', '提示', {
        type: 'warning'
      }).then(() => {
        // 修改状态，逻辑删除
        let params = [data.id];
        // 根据数据ID删除对应项目文档资料
        _this.$http.raw('api/batchDelProFile', params).then(res => {
          let { code } = res;
          if (code === 0) {
            _this.$message({
              type: 'success',
              message: '删除成功！'
            });
            // 刷新列表
            _this.getFilesList();
          }
        }).catch(err => {
          if (err === undefined) {
            _this.$message({
              message: '服务器响应异常！',
              type: 'error'
            });
            return false;
          }
        });
      }).catch(() => {
        _this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // 项目文档资料 - 下载
    filesDownload (row) {
      let _this = this;
      // 获取下载文件路径
      let url = row.picUrl;
      // 判断文件是否存在
      if (url === '' || url === null || url === undefined) {
        _this.$message({
          message: '抱歉，没有文件可供下载！',
          type: 'error'
        });
      } else {
        // 路径斜杆转换反斜杠
        url = url.replace(/\\/g, '/');
        // 截取文件类型
        let start = url.lastIndexOf('.');
        let end = url.length;
        let type = url.slice(start, end);

        // 请求下载文件
        _this.$http.download('api/downLoadFile?filePath=' + url).then(function (res) {
          // new Blob([data])用来创建URL的file对象或者blob对象
          let url = window.URL.createObjectURL(new Blob([res]));
          // 创建下载标签
          let link = document.createElement('a');
          link.style.display = 'none';
          link.href = url;
          // 动态文件名 + 文件类型
          link.download = row.fileName + '.' + type;
          document.body.appendChild(link);
          // 执行下载
          link.click();
          // 释放掉blob对象
          window.URL.revokeObjectURL(link.href);
          // 下载完成移除元素
          document.body.removeChild(link);
        }).catch(err => {
          if (err === undefined) {
            _this.$message({
              message: '服务器响应异常！',
              type: 'error'
            });
            return false;
          }
        });
      }
    },

    // 项目文档资料 - 修改
    filesEdit (row) {
      // 跳转项目验收报告页面并传递数据集合
      this.$router.push({
        path: '/home/prolist/proinfo/file',
        query: {
          datas: row
        }
      });
    },

    // 项目人天信息 - 查询
    getPeoDay () {
      let _this = this;
      // 收集请求信息
      let params = {
        proId: _this.proinfo.id
      };
      // 获取文档资料数据
      _this.$http.post('api/findPredictByProId', params).then(res => {
        let { code, datas } = res;
        if (code === 0) {
          _this.peoDays = datas;
          _this.chartData = {
            columns: ['级别', '人/天'],
            rows: [
              { 级别: '总监', '人/天': datas.director },
              { 级别: '经理', '人/天': datas.manager },
              { 级别: '员工', '人/天': datas.employees }
            ]
          };
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 项目费用信息 - 添加
    moneyAdd () {
      let _this = this;
      // 跳转项目验收报告页面并传递数据集合
      _this.$router.push({
        path: '/home/prolist/proinfo/money'
      });
    },

    // 项目费用信息 - 查询
    getMoney () {
      let _this = this;
      // 收集请求信息
      let params = {
        proId: _this.proinfo.id
      };
      // 获取项目费用信息
      _this.$http.post('api/findProCostByProId', params).then(res => {
        let { code, datas } = res;
        if (code === 0) {
          _this.moneyData = datas;
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 项目费用信息 - 修改
    editCost (row) {
      let _this = this;
      // 跳转项目费用信息页面并传递数据集合
      _this.$router.push({
        path: '/home/prolist/proinfo/money',
        query: {
          datas: row
        }
      });
    },

    // 项目费用信息 - 删除
    costDelete (data) {
      let _this = this;
      // 二次删除确认
      _this.$confirm('确认删除选中的信息吗？', '提示', {
        type: 'warning'
      }).then(() => {
        // 修改状态，逻辑删除
        let params = [data.id];
        // 根据数据ID删除对应项目费用信息
        _this.$http.raw('api/batchProCost', params).then(res => {
          let { code } = res;
          if (code === 0) {
            _this.$message({
              type: 'success',
              message: '删除成功！'
            });
            // 刷新列表
            _this.getMoney();
          }
        }).catch(err => {
          if (err === undefined) {
            _this.$message({
              message: '服务器响应异常！',
              type: 'error'
            });
            return false;
          }
        });
      }).catch(() => {
        _this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  },

  // 实例创建后执行
  created () {
    // 获取所有公司数据
    this.getCompList();
    // 获取项目基本信息
    this.getProinfo();
    // 获取项目成员信息
    this.getMember();
    // 获取Tab初始值
    this.tabs();
    // 获取所有项目合同
    this.getConList();
    // 获取所有验收报告
    this.getAccepList();
    // 获取所有项目文档资料
    this.getFilesList();
    // 获取人天信息
    this.getPeoDay();
    // 获取费用信息
    this.getMoney();
  }
};
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>

<style lang="scss">
.money-box{
  .el-table {
    margin: 0 auto;

    th {
      color: #333;
      background: #f2f2f2;
      padding: 5px 0;
      min-height: 20px;
      line-height: 20px;
      font-size: 14px;
      border-style: solid;
      border-color: #e6e6e6;
    }

    th,
    td {
      font-weight: normal;
      font-size: 14px;
      min-height: 20px;
      line-height: 20px;
    }

    td {
      padding: 5px 0;
    }
  }
}

.fileTabs {
  .el-tabs__item {
    font-size: 14px;
    line-height: 30px;
    font-weight: 400;
  }
  .el-tabs__nav-wrap::after {
    height: 1px;
  }

  .el-table {
    margin: 0 auto;

    th {
      color: #333;
      background: #f2f2f2;
      padding: 5px 0;
      min-height: 20px;
      line-height: 20px;
      font-size: 14px;
      border-style: solid;
      border-color: #e6e6e6;
    }

    th,
    td {
      font-weight: normal;
      font-size: 14px;
      min-height: 20px;
      line-height: 20px;
    }

    td {
      padding: 5px 0;
    }
  }

  .table-pageblock {
    border: 1px solid #e6e6e6;

    .btn,
    .el-pagination {
      padding: 10px 15px 0;
      font-size: 12px;
      height: 38px;
    }
  }
}
</style>
